<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../section-symbol/section-symbol.html">
<dom-module id="item-card">
    <template>
        <style>
        :host {
            margin: 10px 10px 10px 0;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid #d0d0d0;
            background: white;
            flex: 1 250px;
            max-width: calc(33% - 10px);
            transition-properties: opacity, box-shadow;
            transition-duration: 0.4s;
            -webkit-transition-properties: opacity, box-shadow;
            -webkit-transition-duration: 0.4s;
        }

        @media (max-width: 1070px) {
            :host {
                max-width: calc(50% - 10px);
            }
        }

        @media (max-width: 530px) {
            :host {
                max-width: calc(100% - 10px);
            }
        }

        :host(:hover),
        :host(.hover) {
            @apply --shadow-elevation-2dp;
        }

        h3 {
            font-size: 16px;
            font-weight: 500;
            margin: 0;
            padding: 10px 16px 0;
        }

        p {
            margin: 0;
        }

        #el {
            cursor: pointer;
        }

        #hero {
            width: 100%;
            height: 120px;
            background: #ccc;
            border-radius: 3px 3px 0 0;
            overflow: hidden;
            border-bottom: 1px solid #e5e5e5;
        }

        #hero > img {
            width: 100%;
            height: 100%;
        }

        .meta {
            border-top: 1px solid;
            border-bottom: 1px solid;
            border-color: var(--divider-color);
            padding: 10px 16px;
        }

        .meta + .meta {
            border-top: 0;
        }

        .meta:last-child {
            border-bottom: 0;
        }

        #el-desc {
            @apply --paper-font-body1;
            color: var(--secondary-text-color);
            margin: 0;
            padding: 10px 16px;
            height: 75px;
        }

        .section {
            font-size: 12px;
            font-weight: 500;
        }

        .section section-symbol {
            margin: 0 15px 0 0;
        }

        .section > a:hover {
            text-decoration: underline;
        }

        .tags iron-icon {
            margin: 0 15px 0 0;
            padding: 5px;
            color: var(--secondary-text-color);
            --iron-icon-size: 18px;
        }

        .tag {
            margin-right: 4px;
            font-size: 12px;
        }

        .tag:hover {
            text-decoration: underline;
        }

        .tag:after {
            margin-left: -3px;
            content: " ,";
        }

        .tag:last-of-type:after {
            content: "";
        }
        </style>
        <a href="[[_getitemLink(item.id)]]">
            <div id="content" class="vertical layout">
                <div id="el" view="docs">
                    <div id="hero" on-mouseenter="_mouseEnter" on-mouseleave="_mouseLeave" style$="[[_computeStyle(color)]]">
                        <img src="[[_getImageSrc(item.hero)]]">
                    </div>
                    <h3>[[item.name]]</h3>
                </div>
                <p id="el-desc">[[item.description]]</p>
                <div class="horizontal layout center meta section">
                    <section-symbol icon="[[section.icon]]" color="[[section.color]]"></section-symbol>
                    <a href="[[_getSectionLink(item.section)]]">[[section.id]]</a>
                </div>
                <div class="meta tags">
                    <iron-icon icon="maps:local-offer" class="flex-none"></iron-icon>
                    <template is="dom-repeat" items="[[item.tags]]" as="tag">
                        <a href="[[_getTagLink(item.section, tag)]]" class="tag">[[tag]]</a>
                    </template>
                </div>
            </div>
        </a>
    </template>
</dom-module>
<script>
(function() {
    var sharedActionMenu = null;
    var activeCard = null;

    function mouseEnter() {
        if (activeCard) {
            activeCard.showActions();
        }
    }

    function mouseLeave() {
        if (activeCard) {
            activeCard.hideActions();
        }
    }

    Polymer({
        is: 'item-card',
        enableCustomStyleProperties: true,
        properties: {
            item: {
                type: Object
            },
            color: {
                type: String
            },
            section: {
                type: Object
            }
        },

        observers: [
            '_updateSection(_item)'
        ],

        attached: function() {
            this.style.opacity = 0;

            this.async(function() {
                this.style.opacity = 1;
            }, 1);
        },

        detached: function() {
            if (activeCard === this) {
                activeCard = null;
                if (sharedActionMenu) {
                    Polymer.dom(this.parentNode).removeChild(sharedActionMenu);
                    sharedActionMenu = null;
                }
            }
        },

        _tagClicked: function(e) {
            e.stopPropagation();
            this.dispatchEvent(new CustomEvent('update-params', { bubbles: true, composed: true, detail: {
                tag: e.currentTarget.name
            } }));

        },
        _computeStyle: function(color) {
            return 'background-color:' + color;
        },
        _getItemLink: function(id) {
            return './' + id;
        },
        _getImageSrc: function(src) {
            return src && src.length ? src : '../../assets/hero/random-' + Math.ceil(Math.random() * 4) + '.svg';
        },

        _getSectionLink: function(sectionName) {
            return '/browse?section=' + sectionName + '&view=cards';
        },

        _getTagLink: function(sectionName, tag) {
            return '/browse?tag=' + tag + '&view=cards';
        },

        showActions: function() {
            var top = this.$.hero.offsetTop;
            var left = this.$.hero.offsetLeft;
            var width = this.$.hero.offsetWidth;

            if (!sharedActionMenu) {
                sharedActionMenu = document.createElement('item-action-menu');
                sharedActionMenu.classList.add('cards');
                sharedActionMenu.classList.add('hidden');
                sharedActionMenu.addEventListener('mouseenter', mouseEnter, {passive: true});
                sharedActionMenu.addEventListener('mouseleave', mouseLeave, {passive: true});
            }
            if (!sharedActionMenu.parentNode) {
                Polymer.dom(this.parentNode).appendChild(sharedActionMenu);
            }

            top += this.$.hero.offsetHeight - sharedActionMenu.offsetHeight;

            sharedActionMenu.element = this.item.name;
            sharedActionMenu.style.top = top + 'px';
            sharedActionMenu.style.left = left + 'px';
            sharedActionMenu.style.width = width + 'px';

            this._layoutIfNeeded(sharedActionMenu);
            sharedActionMenu.classList.remove('hidden');
            this.classList.add('hover');
            sharedActionMenu.cancelDebouncer('hide');
        },

        hideActions: function() {
            if (sharedActionMenu && sharedActionMenu.element == this.item.name) {
                sharedActionMenu.debounce('hide', function() {
                    sharedActionMenu.classList.add('hidden');
                }, 10);
                this.classList.remove('hover');
            }
        },

        _mouseEnter: function() {
            activeCard = this;
            mouseEnter();
        },

        _mouseLeave: function(e) {
            mouseLeave();
        },

        _layoutIfNeeded: function(el) {
            return el.offsetTop;
        }
    });

})();
</script>
